<template>
	<view class="main-content-area">
		<u-navbar :titleSize="34" title="风险查询" back-icon-color="#171716" :border-bottom="false" :background="{
			background:'url(https://resource.lanbaozixun.com/uploads/images/20250904130011b65ca5404.png) no-repeat',
			backgroundSize:'100%'
			}" title-color="#171716" titleBold :isBack="false">
		</u-navbar>
		<image src="https://resource.lanbaozixun.com/uploads/images/202509041300118271c0072.png" mode="widthFix"
			class="area-img"></image>
		<view class="form-area" v-if="payStatus == -1">
			<u-form ref="uForm" class="u-p-l-40 u-p-r-40" :model="formData" :error-type="['toast']" :rules="rules">
				<u-form-item prop="name" :border-bottom="false">
					<u-input v-model="formData.name" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item prop="id_code" :border-bottom="false">
					<u-input v-model="formData.id_code" placeholder="请输入身份证" />
				</u-form-item>
				<u-form-item prop="phone" :border-bottom="false">
					<u-input v-model="formData.phone" placeholder="请输入手机号" />
				</u-form-item>

				<view class="u-flex">
					<u-form-item prop="code" :border-bottom="false">
						<u-input v-model="formData.code" :maxlength="4" placeholder="请输入验证码" />
					</u-form-item>

					<view class="sms-btn sm u-m-l-20" :class="{'forbid':!canSendSms}" @click="$sendSms">
						<view v-show="canSendSms">获取验证码</view>
						<u-count-down bg-color="transparent" ref="countDown" :show-days="false" :timestamp="time"
							:showColon="false" separator="zh" color="#eee" separator-color="#eee" :show-hours="false"
							:show-minutes="false" :autoplay="false" v-show="!canSendSms" @end="countDownFinish()" />
					</view>
				</view>
			</u-form>
			<view class="u-m-t-40 u-m-b-30 u-m-l-45">
				<view>
					<u-checkbox-group activeColor="#165DFF">
						<u-checkbox v-model="authorization" :label-size="24" :size="24" shape="circle">
							<span class="u-color-999999">授权上级查看权限</span>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="xs row ">
					<u-checkbox-group activeColor="#165DFF">
						<u-checkbox v-model="agreement" :label-size="24" :size="24" shape="circle">
							<span class="u-color-999999">已阅读并同意</span>
						</u-checkbox>
					</u-checkbox-group>

					<navigator class="primary" style="color: #165DFF;" hover-class="none"
						url="/pages/bundle/server_explan/server_explan?type=0">《服务协议》</navigator>
					<span class="u-color-999999">和</span>
					<navigator class="primary" style="color: #165DFF;" hover-class="none"
						url="/pages/bundle/server_explan/server_explan?type=1">《隐私协议》</navigator>
				</view>
			</view>
			<u-button type="primary" :custom-style="{
				width:'90%',
				fontSize:'14px',
				margin: '0 auto',
				borderRadius:'20rpx',
				background: '#165DFF'
			}" @click="applyProduct">立即支付检测</u-button>

		</view>
		<view v-else-if="payStatus != -1" class="form-area">
			<view v-if="payStatus != 0" class="">
				<u-icon name="checkmark-circle-fill" color="#19be6b" size="120"></u-icon>
				<view class="xl bold white u-padding-top-10">
					支付成功
				</view>
				<view class="xs u-color-666666 bold u-padding-top-10 u-padding-bottom-30">
					<p>稍后可以在上一页进行查看报告或联系渠道经理</p>
				</view>
			</view>
			<view v-else-if="payStatus != 1" class="">
				<u-icon name="close-circle-fill" color="#fa3534" size="120"></u-icon>
				<view class="xl bold white u-padding-top-10">
					支付失败
				</view>
			</view>
		</view>
		<view class="u-p-b-40">
			<view class="u-m-t-60 u-text-center">
				<image src="https://resource.lanbaozixun.com/uploads/images/202509041300115bf270396.png" mode="widthFix"
					style="width: 40%;height: 100px;"></image>
			</view>
			<view class="u-gap u-row-between">
				<image src="https://resource.lanbaozixun.com/uploads/images/20250904130010c31ac3628.png" mode="widthFix"
					class="item"></image>
				<image src="https://resource.lanbaozixun.com/uploads/images/20250904130010e7d466816.png" mode="widthFix"
					class="item"></image>
				<image src="https://resource.lanbaozixun.com/uploads/images/202509041300104337a2641.png" mode="widthFix"
					class="item"></image>
				<image src="https://resource.lanbaozixun.com/uploads/images/20250904130011470b66647.png" mode="widthFix"
					class="item"></image>
			</view>
		</view>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		wxpay
	} from '@/utils/pay'
	import {
		sendSms
	} from '@/api/app';
	import {
		SMSType
	} from "@/utils/type"
	import {
		menuJump,
		isWeixinClient
	} from '@/utils/tools.js'
	import {
		pay,
		oauthUrl
	} from '../../api/enterprise_report'
	import {
		mapGetters
	} from 'vuex'
	import TkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	export default {
		data() {
			return {
				time: 60,
				openId: '',
				isWeixin: false,
				canSendSms: true,
				agreement: true,
				loadingShowStatus: true,
				authorization: true,
				qrCodeUrl: '',
				formData: {
					name: '',
					phone: '',
					id_code: '',
					code: '',
				},
				payStatus: -1,
				share_id: 0,
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					id_code: [{
							required: true,
							message: '请输入身份证号码',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.idCard(value);
							},
							message: '身份证号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			};
		},
		async onLoad(e) {
			this.isWeixin = isWeixinClient()

			if (this.isWeixin && this.$u.test.isEmpty(e.openId)) {
				var {
					data
				} = await oauthUrl({
					url: window.location.href
				})
				window.location.href = data
			} else if (this.isWeixin && !this.$u.test.isEmpty(e.openId)) {
				this.openId = e.openId
				this.loadingShowStatus = false;
			} else if (!this.isWeixin) {
				this.loadingShowStatus = false;
			}

			if (!this.$u.test.isEmpty(e.share_id)) {
				this.share_id = e.share_id
			}
		},
		methods: {
			menuJump(e) {
				menuJump(e)
			},
			countDownFinish() {
				this.canSendSms = true;
			},
			// 发送验证码
			$sendSms() {
				if (this.canSendSms == false) {
					return;
				}
				if (!this.formData.phone) {
					this.$toast({
						title: '请填写手机号信息～'
					})
					return;
				}

				sendSms({
					mobile: this.formData.phone,
					key: SMSType.YZ
				}).then(res => {
					if (res.code == 1) {
						this.canSendSms = false;
						this.$refs.countDown.start();
						this.$toast({
							title: res.msg
						});
					}
				})
			},
			// 支付后处理
			handPayResult(result) {
				const _this = this;
				switch (result) {
					case 'success':
						_this.$u.toast('请稍后查收报告')
						_this.payStatus = 0
						break;
					case 'fail':
					default:
						_this.$u.toast('支付失败');
						_this.payStatus = 1
				}
				// 页面出栈
			},
			applyProduct() {
				const _this = this;
				if (!_this.agreement) return _this.$u.toast('请阅读底部协议');
				if (!_this.isWeixin) return _this.$u.toast('微信外无法查询');
				_this.$refs.uForm.setRules(_this.rules);
				let {
					name,
					image,
					phone,
					id_code,
					code
				} = _this.formData;

				_this.$refs.uForm.validate(valid => {
					if (valid) {
						pay({
							id_card_name: name,
							mobile: phone,
							id_card: id_code,
							code: code,
							share_id: _this.share_id,
							openid: _this.openId,
							authorization: _this.authorization ? 1 : 0,
						}).then(res => {
							if (res.code == 1) {
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', {
										"appId": res.data.appId,
										"paySign": res.data.paySign,
										"package": res.data.package,
										"nonceStr": res.data.nonceStr,
										"signType": res.data.signType,
										"timeStamp": res.data.timeStamp
									},
									function(res) {
										if (res.err_msg == "get_brand_wcpay_request:ok") {
											_this.handPayResult('success')
										} else {
											_this.handPayResult('fail')
										}
									}
								);
							} else {
								_this.$u.toast(res.msg);
							}
						})
					}
				});
			}
		},
		computed: {
			...mapGetters(['inviteCode', 'userInfo']),
		}
	}
</script>

<style lang="scss">
	page {
		background: white;
	}

	.main-content-area {
		min-height: 100vh;
		background: url(https://resource.lanbaozixun.com/uploads/images/20250904130011b65ca5404.png) no-repeat;
		background-size: 100% auto;

		.area-img {
			width: 100vw;
			display: block;
			margin-top: 40rpx;
		}

		.form-area {
			z-index: 1;
			margin: -16vh 40rpx 0;
			padding: 30px 0;
			position: relative;
			border-radius: 10px 10px 0 0;
			background: url(https://resource.lanbaozixun.com/uploads/images/20250904130010fd06f7744.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.qr-code-area {
		position: relative;

		.poster-button {
			right: 0;
			color: white;
			top: calc(40%);
			font-size: 12px;
			padding: 5px 10px;
			position: absolute;
			display: inline-block;
			border-radius: 5px 0 0 5px;
			background: linear-gradient(90deg, #6BB2FF 0%, #2C60DE 100%);
		}
	}

	.query-lists-btn {
		right: 0;
		padding: 5px 10px;
		position: absolute;
		display: inline-flex;
		border-radius: 5px 0 0 5px;
		background: linear-gradient(90deg, #6BB2FF 0%, #2C60DE 100%);
	}

	.title {
		color: #333333;
		font-size: 16px;
		text-align: center;
		padding-bottom: 10px;
	}

	.qr-code {
		text-align: center;
	}

	::v-deep .u-form-item {
		margin-bottom: 15px;
		padding: 3px 15px;
		background: #FFFFFF;
		border-radius: 10px;


	}

	::v-deep .form-area .u-flex {
		.u-form-item {
			margin-bottom: 0 !important;
		}

		.sms-btn {
			color: white;
			background: #165DFF;
			flex: 1;
			text-align: center;
			height: 40px;
			line-height: 40px;
			border-radius: 10px;
			overflow: hidden;

			&.forbid {
				color: #eee;
				background: #9e9e9e;
			}
		}
	}

	.u-gap {
		display: grid;
		gap: 30rpx 30rpx;
		margin: 40rpx 40rpx 0;
		grid-template-columns: repeat(2, 1fr);
	}

	.item {
		width: 100%;
		flex-shrink: 0;
	}
</style>